<div class="modal modal-default fade" id="modal-navs" ng-init="$ctrl.init()">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select reference database</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <table class="table table-hover" cellspacing="0">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" width="3%">
                                        <span class="oi oi-sort-ascending"></span>
                                    </th>
                                    <th scope="col" style="width: 4%;">
                                        <input ng-if="!$ctrl.isSingle" type="checkbox" ng-model="$ctrl.isActived"
                                            ng-change="$ctrl.selectAll($ctrl.isActived)" />
                                    </th>
                                    <th scope="col" ng-repeat="col in $ctrl.cols" ng-bind="col">
                                    </th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr ng-repeat="item in $ctrl.data.items track by $index">
                                    <td style="cursor:grab;" class="drag-header">
                                        <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                                            style="cursor: grab"></small>
                                    </td>
                                    <td>
                                        <input type="checkbox" ng-model="item.isActived"
                                            ng-change="$ctrl.selectChange(item)" />
                                    </td>
                                    <td ng-repeat="col in $ctrl.cols">
                                        <small>{{item[col]}}</small>
                                    </td>
                                    <td>
                                        <preview-image img-height="25" img-src="item.image"></preview-image>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <hr>

                        <paging class="small" page="$ctrl.request.pageIndex + 1" page-size="$ctrl.request.pageSize"
                            total="$ctrl.request.totalItems" ul-class="pagination justify-content-end m-0"
                            a-class="page-link" paging-action="$ctrl.getList($ctrl.request.pageIndex)"
                            scroll-top="true">
                    </div>
                    <div class="col-4">
                        <h6 class="form-label">Filter</h6>
                        <filter-list request="$ctrl.request" callback="$ctrl.getList(pageIndex)"></filter-list>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-12">
                        <a href="#" class="btn btn-primary px-5" ng-click="$ctrl.saveSelected()"><i
                                class="fas fa-save"></i> Save</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>